<template>
  <div class="page-Body">
    <h2 class="page-title">标签列表</h2>
    <!-- 表单 -->
    <el-form :inline="true" :model="formInline">
      <el-form-item label="标签名称">
        <el-input
          v-model="formInline.name"
          placeholder="请输入标签名称"
          clearable
          style="width: 250px"
          v-noSpace
        />
      </el-form-item>
      <el-form-item label="标签分类">
        <el-select
          v-model="formInline.typeId"
          placeholder="请选择标签分类"
          clearable
          @focus="getClick"
          style="width: 250px"
          :loading="load"
        >
          <el-option
            v-for="item in tagSelectList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分组">
        <el-select
          v-model="formInline.tagGroup"
          placeholder="请选择分组"
          clearable
          style="width: 250px"
          v-noSpace
        >
          <el-option label="用户" value="USER" />
          <el-option label="活动" value="ACTIVITY" />
          <el-option label="社群" value="COMMUNITY" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Search">搜索</el-button>
        <el-button @click="Reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 新增对话框组件 -->
    <el-button plain @click="AddOpenDialog" class="el-DiaButton" type="primary">
      添加
    </el-button>
    <AddTagList
      @confirm="AddConfirm"
      @cancel="AddClose"
      :dialogAdd="dialogAdd"
    />
    <!-- 编辑对话框 -->
    <EditTagList
      @confirm="EditConfirm"
      @cancel="EditClose"
      :dialogEdit="dialogEdit"
      :EditRow="EditRow"
    />
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      fit
      empty-text="暂无数据"
      show-header
      v-loading="loading"
      size="default"
      element-loading-text="Loading..."
      :header-cell-style="{ background: '#e7e1fb' }"
      style="width: 100%"
      max-height="540px"
    >
      <el-table-column prop="" type="selection" width="55" />
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="name" label="标签名称" />
      <el-table-column prop="typeName" label="标签分类" />
      <el-table-column prop="tagGroupName" label="分组" />
      <el-table-column prop="addTime" label="添加时间" />
      <el-table-column prop="attributeName" label="官方" />
      <el-table-column prop="addName" label="添加者" />
      <el-table-column align="center" fixed="right" label="操作" v-slot="scope">
        <el-button link type="primary" @click="EditOpenDialog(scope.row)">
          编辑
        </el-button>
        <el-button
          link
          type="primary"
          @click="Del(scope.row.id)"
          :disabled="scope.row.enabled === 0"
        >
          <span :style="scope.row.enabled === 0 ? { color: 'red' } : {}">
            {{ scope.row.enabled === 0 ? '已隐藏' : '隐藏' }}
          </span>
        </el-button>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination-block">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 40, 80, 100]"
        background
        layout="total,sizes, prev, pager, next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { getTagList, tagHide, tagSelect } from '@/api/Tag/tag.js';
import { ref, onMounted } from 'vue';
import AddTagList from '@/components/Tag/AddTagList.vue';
import EditTagList from '@/components/Tag/EditTagList.vue';
// 分页变量
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
// 对话框
const dialogAdd = ref(false);
const dialogEdit = ref(false);
// 表单数据
const formInline = ref({
  name: '',
  typeId: '',
  tagGroup: '',
});
const tagSelectList = ref([]);
const load = ref(false);
const EditRow = ref({});
// 列表数据+表单校验
const tableData = ref([]);
const loading = ref(true);
// 分页逻辑
const handleSizeChange = async (val) => {
  pageSize.value = val;
  TagList();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  TagList();
};
// 获取列表
const TagList = async () => {
  loading.value = true;
  const res = await getTagList({
    current: currentPage.value,
    size: pageSize.value,
    query: { ...formInline.value },
  });
  if (res.data.code === 200) {
    tableData.value = res.data.data.items;
    total.value = res.data.data.counts || 0;
    loading.value = false;
  }
};
const getClick = () => {
  getTagSelect();
};
// 获取标签下拉
const getTagSelect = async () => {
  if (tagSelectList.value.length > 0) return; // 如果已有数据则不重复获取
  load.value = true;
  const res = await tagSelect({});
  if (res.data.code === 200) {
    tagSelectList.value = res.data.data;
    load.value = false;
  }
};
// 搜索校验
const hasSearchConditions = () => {
  const { name, tagGroup, typeId } = formInline.value;
  return name || tagGroup || typeId;
};
// 搜索
const Search = async () => {
  if (!hasSearchConditions()) {
    // eslint-disable-next-line no-undef
    ElMessage({
      message: '请至少输入一个搜索条件',
      type: 'warning',
    });
    return;
  }
  TagList();
};
// 重置
const Reset = () => {
  // 如果当前已经是空值状态，直接返回
  if (
    formInline.value.name === '' &&
    formInline.value.tagGroup === '' &&
    formInline.value.typeId === ''
  ) {
    return;
  }
  formInline.value = {};
  TagList();
};

// 删除
const Del = async (id) => {
  const res = await tagHide(id);
  if (res.data.code === 200) {
    // eslint-disable-next-line no-undef
    ElMessage({
      message: '隐藏成功',
      type: 'success',
    });
    TagList();
  } else {
    // eslint-disable-next-line no-undef
    ElMessage({
      message: res.data.msg,
      type: 'warning',
    });
  }
};
// 添加功能对话框
const AddOpenDialog = () => {
  dialogAdd.value = true;
};

const AddConfirm = () => {
  dialogAdd.value = false;
  TagList();
};
const AddClose = () => {
  dialogAdd.value = false;
};
// 编辑功能对话框
const EditOpenDialog = (row) => {
  dialogEdit.value = true;
  EditRow.value = row;
};

const EditConfirm = () => {
  dialogEdit.value = false;
  TagList();
};
const EditClose = () => {
  dialogEdit.value = false;
};
onMounted(() => {
  TagList();
});
</script>

<style lang="scss" scoped>
.el-DiaButton {
  width: 120px;
  height: 40px;
  border-radius: 4px;
  margin-bottom: 20px;
  border: 1px solid #c7d4ff;
}
</style>
